<template>
  <div class="first">
    <div class="main">
      <div class="left">
        <div id="use"></div>
        <div id="control"></div>
        <div id="fence"></div>
        <div id="hamding"></div>
      </div>
      <div class="right">
        <div id="install"></div>
        <div id="sleep"></div>
        <div id="assets"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";

import * as echarts from "echarts";
import "echarts-liquidfill";
import useFontSize from "@/hooks/useFontSize";
let { fontSize } = useFontSize();
let chartsColor = "#fff";
let useCharts = ref(null);
// 使用
const useFn = () => {
  let option = {
    title: {
      text: "资产使用率",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    grid: {
      left: "0%",
      top: "10%",
    },
    series: [
      {
        // 单个水波图
        type: "liquidFill", //水波图
        radius: "60%",
        center: ["50%", "50%"], // 动画更新时间
        data: [0.95],
        label: {
          formatter: "95%\n资产使用率",
          textStyle: {
            fontSize: 16,
            // fontFamily: "Lobster Two",
          },
        },
      },
    ],
  };

  let use = document.getElementById("use");
  useCharts = echarts.init(use);
  useCharts.setOption(option);
};
// 监控
let controlCharts = ref(null);
const controlFn = () => {
  let option = {
    title: {
      text: "资产监控率",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    series: [
      {
        // 单个水波图
        type: "liquidFill", //水波图
        radius: "60%",
        center: ["50%", "50%"], // 动画更新时间
        data: [0.9],
        label: {
          formatter: "90%\n资产监控率",
          textStyle: {
            fontSize: 16,
          },
        },
      },
    ],
  };

  let control = document.getElementById("control");
  controlCharts = echarts.init(control);
  controlCharts.setOption(option);
};
// 资产围栏
let fenceCharts = ref(null);
const fenceFn = () => {
  let option = {
    title: {
      text: "资产围栏",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "category",
      data: ["JO1", "JO2", "JO3", "JO4", "JO5"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        textStyle: {
          color: chartsColor, 
        },
      },
    },
    barWidth: 30,
    yAxis: {
      type: "value",
      min: 0,
      max: 12,
      interval: 2,
      axisLabel: {
        textStyle: {
          color: chartsColor,
        },
      },
      splitLine: { show: false },
    },
    series: [
      {
        data: [5, 1, 1, 1, 1],
        type: "bar",
        // showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: "#4d76ff",
              },
              {
                offset: 1,
                color: "#80aaff",
              },
            ]),
          },
        },
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
      },
    ],
  };
  let fence = document.getElementById("fence");
  fenceCharts = echarts.init(fence);
  fenceCharts.setOption(option);
};
// 告警处理状态
let hamdingCharts = ref(null);
const hamdingFn = () => {
  let option = {
    title: {
      text: "告警处理状态",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "category",
      data: ["2023-07-14", "2023-07-15", "2023-07-16"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        textStyle: {
          color: chartsColor,
        },
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 1000,
      interval: 200,
      splitLine: { show: false },
      axisLabel: {
        textStyle: {
          color: chartsColor,
        },
      },
    },
    series: [
      {
        data: [500, 700, 580],
        type: "bar",
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: "#4d76ff",
              },
              {
                offset: 1,
                color: "#80aaff",
              },
            ]),
          },
        },
      },
      {
        data: [180, 220, 450],
        type: "bar",
        // showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: "rgba(13, 113, 226,0.8)",
              },
              {
                offset: 1,
                color: "rgba(13, 113, 226,0.2)",
              },
            ]),
          },
        },
      },
      {
        data: [80, 160, 140],
        type: "bar",
        // showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: "rgba(21, 89, 172,0.8)",
              },
              {
                offset: 1,
                color: "rgba(21, 89, 172,0.2)",
              },
            ]),
          },
        },
      },
    ],
  };
  let hamding = document.getElementById("hamding");
  hamdingCharts = echarts.init(hamding);
  hamdingCharts.setOption(option);
};
// 安装标签资产统计
let installChart = ref(null);
const installFn = () => {
  let option = {
    title: {
      text: "安装标签资产统计",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
      textStyle: {
        color: chartsColor,
      },
      selectedMode:false,
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "30.5%"],
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderRadius: 2,
          borderColor: "#2f4463",
          borderWidth: 2,
        },
        data: [
          { value: 0, itemStyle: { color: "#2f4463" } },
          { value: 0, itemStyle: { color: "#2f4463" } },
        ],
      },
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#c7c7c7",
          borderWidth: 2,
        },
        label: {
          formatter: 31 + "%\n标签资产",
          color:chartsColor,
          fontSize: 16,
          position: "center",
        },
        labelLine: {
          show: true,
        },
        data: [
          {
            value: 2366,
            name: "标签资产数量\n2,366",
            itemStyle: {
              color: "#c7c7c7",
            },
          },
          {
            value: 733.46,
            name: "标签资产占比\n31%",
            itemStyle: {
              color: "#1077ff",
            },
          },
        ],
      },
      {
        type: "pie",
        radius: ["52%", "53.5%"],
        labelLine: {
          show: false,
        },
        data: [
          { value: 2366, itemStyle: { color: "#c7c7c7" } },
          { value: 733.46, itemStyle: { color: "#1077ff" } },
        ],
      },
    ],
  };
  let install = document.getElementById("install");
  installChart = echarts.init(install);
  installChart.setOption(option);
};
// 沉睡资产统计
let sleepChart = ref(null);
const sleepFn = () => {
  let option = {
    title: {
      text: "沉睡资产统计",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
      textStyle:{
        color:chartsColor
      },
      selectedMode:false,
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "30.5%"],
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderColor: "#2f4463",
          borderWidth: 2,
        },
        data: [
          { value: 0, itemStyle: { color: "#2f4463" } },
          { value: 0, itemStyle: { color: "#2f4463" } },
        ],
      },
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#c7c7c7",
          borderWidth: 2,
        },
        label: {
          formatter: '{total|5%}\n{active|沉睡资产}',
          rich: { 
						total:{ 
							fontSize:16,                   
						},
						active: { 
							fontSize: 16,
							lineHeight:16,             
						},  
          },      
          color: chartsColor,
          position: "center",
        },
        labelLine: {
          show: true,
        },
        data: [
          {
            value: 380,
            name: "标签资产数量\n380",
            itemStyle: {
              color: "#c7c7c7",
            },
          },
          {
            value: 19,
            name: "标签资产占比\n5%",
            itemStyle: {
              color: "#1077ff",
            },
          },
        ],
      },
      {
        type: "pie",
        radius: ["52%", "53.5%"],
        labelLine: {
          show: false,
        },
        data: [
          { value: 380, itemStyle: { color: "#c7c7c7" } },
          { value: 19, itemStyle: { color: "#1077ff" } },
        ],
      },
    ],
  };
  let sleep = document.getElementById("sleep");
  sleepChart = echarts.init(sleep);
  sleepChart.setOption(option);
};
// 资产分类统计
let assetsChart = ref(null);
const assetsFn = () => {
  let option = {
    title: {
      text: "资产分类统计",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    barWidth: 30,
    xAxis: {
      type: "category",
      data: ["房屋建筑物", "无形资产", "机器设备", "电子设备", "装修改良"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        textStyle: {
          color: chartsColor,
        },
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 5000,
      interval: 1000,
      splitLine: { show: false },
      axisLabel: {
        show: true,
        textStyle: {
          color: chartsColor,
        },
      },
    },
    series: [
      {
        data: [5, 500, 2300, 3990, 236],
        type: "bar",
        // showBackground: true,
        itemStyle: {
          normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(5, 104, 223,0.8)", // 起始颜色
            },
            {
              offset: 1,
              color: "rgba(5, 104, 223,0.2)", // 结束颜色
            },
          ]),
          },
        },
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
      },
    ],
  };
  let assets = document.getElementById("assets");
  assetsChart = echarts.init(assets);
  assetsChart.setOption(option);
};

onMounted(() => {
  useFn();
  controlFn();
  fenceFn();
  hamdingFn();
  installFn();
  sleepFn();
  assetsFn();
  window.addEventListener("resize", () => {
    useCharts.resize();
    controlCharts.resize();
    fenceCharts.resize();
    hamdingCharts.resize();
    installChart.resize();
    sleepChart.resize();
    assetsChart.resize();
  });
});
onUnmounted(() => {
  useCharts.dispose();
  controlCharts.dispose();
  fenceCharts.dispose();
  hamdingCharts.dispose();
  installChart.dispose();
  sleepChart.dispose();
  assetsChart.dispose();
});
</script>
<style scoped>
.first {

}
.left {
  float: left;
}
.left > div {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
#control {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
.right {
  float: right;
  /* padding: 5vh 0 0 1vw; */
}
.right > div {
  width: 4rem;
  height: 2.85rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}
</style>
